<!-- WebComponent example based off element-boilerplate: https://github.com/webcomponents/element-boilerplate -->
<template>
    <style>
        .weui-btn:after {
            content: " ";
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid rgba(0, 0, 0, 0.2);
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            box-sizing: border-box;
            border-radius: 10px;
        }
        .weui-btn {
            position: relative;
            display: block; 
            padding-left: 14px;
            padding-right: 14px;
            box-sizing: border-box;
            font-size: 18px;
            text-align: center;
            text-decoration: none; 
            line-height: 2.55555556;
            border-radius: 5px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            overflow: hidden;
        }
        a {
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .weui-btn_primary:not(.weui-btn_disabled):active {
            color: rgba(255, 255, 255, 0.6);
            background-color: #179B16;
        }
        .weui-btn_primary {
            color:#fff;
            background-color: #1AAD19;
        }

        .weui-btn_default:not(.weui-btn_disabled):active {
            color: #000000;
            background-color: #DEDEDE;
        }
        .weui-btn_default { 
            color: #000000;
            background-color: #fff;
        }

        .weui-btn_warn:not(.weui-btn_disabled):active {
            color: rgba(255, 255, 255, 0.6);
            background-color: #CE3C39;
        }
        .weui-btn_warn {
            color:#fff;
            background-color: #E64340;
        }



    </style> 
    <a href="javascript:;" class="weui-btn"> <content select=".span"></content> </a> 
</template>
<script>
    (function() {
        // Creates an object based in the HTML Element prototype
        var element = Object.create(HTMLElement.prototype); 
        // Fires when an instance of the element is created
        var nodeDocument = document.currentScript.ownerDocument;
        element.createdCallback = function() {
            // Gets content from <template>
            var tagA = nodeDocument.querySelector('template').content.querySelector("a");
            var nodeAttrType = this.getAttribute('data-type');
            tagA.className = "weui-btn weui-btn_" + nodeAttrType;

            var template = nodeDocument.querySelector('template').content;
            // Creates the shadow root
            var shadowRoot = this.createShadowRoot();
            // Adds a template clone into shadow root
            var clone = document.importNode(template, true);
            

            //console.log(shadowRoot.)
            shadowRoot.appendChild(clone);
        };
        document.registerElement('wx-button', {
            prototype: element
        });
    }());
</script>